<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第三个Vue程序</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>

        <div class="third"></div>

        <script type="text/javascript">

            const options = {
                template: `<input type="text" v-model="name">
                           <button type="button" v-on:click="handle" >添加</button>
                           <p>{{ array }}</p>`,
                data: function(){
                    let x = {
                        name: '',
                        array: [ ]
                    }
                    return x ;
                },
                methods: {
                    handle: function(){
                        // 使用 this.array 和 this.name 可以访问在 data 中返回的响应式数据
                        // Array.prototype.push 可以将参数添加到数组实例中
                        this.array.push( this.name );
                        this.name = '' ;
                    }
                }
            }

            const app = Vue.createApp( options );
            const vm = app.mount( '.third' );
            console.log( 'view-model' , vm );
        </script>
        
    </body>
</html>